<template>
    <view class="tag-list">
        <view class="tag-item" v-for="(item, index) in tagList" :key="index">
            <up-tag :text="item.label" :icon="icon" :plain="!item.checked" type="warning" :name="index"
                @click="radioClick">
            </up-tag>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core';
const props = defineProps({
    tagList: {
        type: [String, Number, Object, Array, Boolean, Function] as PropType<any>,
        default: () => []
    },
    icon: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['update:modelValue', 'update:tagList', 'tagConfirm']);
const tagList = useVModel(props, 'tagList', emit)
const modelValue = useVModel(props, 'modelValue', emit)
const radioClick = (name: any) => {
    tagList.value.forEach((item: any, index: any) => {
        item.checked = index === name;
        modelValue.value = tagList.value[name].label
    });
};

watch(() => modelValue.value, (val) => {
    if (!val) {
        for (let item of tagList.value) {
            item.checked = false
        }
    }
},
);
</script>

<style lang="scss" scoped>
.tag-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -5px;

    .tag-item {
        margin: 5px;
    }
}
</style>